<!-- home -->
<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-field
        v-model="query.name"
        name="name"
        required
        label="商户姓名"
        placeholder="请输入商户姓名"
        clearable
        :rules="[{ required: true, message: '请输入商户姓名' }]"
      />
      <van-field
        v-model="query.deputy"
        name="deputy"
        required
        label="代表名称"
        placeholder="请输入代表名称"
        clearable
        :rules="[{ required: true, message: '请输入代表名称' }]"
      />
      <van-field
        v-model="query.tel"
        name="tel"
        required
        label="联系号码"
        type="tel"
        placeholder="请输入联系号码"
        clearable
        :rules="[{ required: true, message: '请输入联系号码' }]"
      />
      <van-field v-model="query.industry" name="industry" label="行业" placeholder="请输入行业" clearable />
      <van-field
        v-model="query.money"
        name="money"
        type="number"
        label="注册资金"
        placeholder="请输入注册资金"
        clearable
      >
        <template #extra> 万元 </template>
      </van-field>
      <van-field v-model="query.email" name="email" label="邮箱" placeholder="请输入邮箱" clearable />
      <van-field
        v-model="query.introduce"
        name="introduce"
        label="简介"
        placeholder="请输入简介"
        clearable
        rows="3"
        autosize
        maxlength="250"
        show-word-limit
      />
      <van-field
        v-model="query.memo"
        name="memo"
        label="备注"
        placeholder="请输入备注"
        clearable
        rows="2"
        autosize
        maxlength="250"
        show-word-limit
      />
      <div style="margin: 16px 0">
        <van-button block type="info" native-type="submit" style="margin-top: 10px">提交</van-button>
      </div>
    </van-form>
    <van-cell-group>
      <van-field
        :readonly="!isEdit"
        :required="isEdit"
        v-model="query.name"
        clearable
        label="商户姓名"
        placeholder="请输入商户姓名"
      />
      <van-field
        :readonly="!isEdit"
        :required="isEdit"
        v-model="query.deputy"
        clearable
        label="代表名称"
        placeholder="请输入代表名称"
      />
      <van-field
        :readonly="!isEdit"
        v-model="query.tel"
        :required="isEdit"
        type="tel"
        clearable
        label="联系号码"
        placeholder="请输入联系号码"
      />
      <van-field :readonly="!isEdit" v-model="query.industry" clearable label="行业" placeholder="请输入行业" />
      <van-field
        :readonly="!isEdit"
        v-model="query.money"
        type="number"
        clearable
        label="注册资金"
        placeholder="请填写注册资金"
      >
        <template #extra> 万元 </template>
      </van-field>
      <van-field :readonly="!isEdit" v-model="query.email" clearable label="邮箱" placeholder="请填写邮箱" />
      <van-field
        :readonly="!isEdit"
        v-model="query.introduce"
        type="textarea"
        clearable
        label="简介"
        rows="3"
        autosize
        maxlength="250"
        show-word-limit
        placeholder="填写简介信息"
      />
      <van-field
        :readonly="!isEdit"
        v-model="query.memo"
        type="textarea"
        clearable
        label="备注"
        rows="2"
        autosize
        maxlength="250"
        show-word-limit
        placeholder="填写备注信息"
      />
    </van-cell-group>
    <van-button type="info" block style="margin-top: 10px" @click="formVerify" v-show="isEdit">提交</van-button>
  </div>
</template>

<script>
// 请求接口
import { addConsulting } from '@/api/commercialTenant.js'
import { Notify, Dialog, Toast } from 'vant'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      isEdit: false,
      query: {
        id: '',
        name: '商户1',
        deputy: '1',
        tel: '13000000000',
        industry: 1,
        money: 10,
        email: '1@email.com',
        introduce: '简介1',
        memo: '备注1'
      },
      errorMsg: {
        name: '请输入姓名',
        tel: '请输入手机号码',
        deputy: '请输入代表'
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.initData()
  },
  methods: {
    formVerify() {
      let error = false,
        msg
        // re = /^1\d{10}$/
      for (var key in this.query) {
        if (!this.query[key] && this.errorMsg[key]) {
          error = true
          msg = this.errorMsg[key]
        }
      }

      if (error) {
        Notify({
          message: msg,
          duration: 3000,
          background: '#FF5722'
        })
      } else {
        this.onSubmit()
      }
    },
    // 提交
    async onSubmit(values) {
      let toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '正在提交'
      })
      try {
        const { msg } = await addConsulting(this.query)
        Dialog.alert({
          message: msg
        })
        this.isEdit = false
      } finally {
        toast.clear()
      }
    },
    // 编辑资料
    goEdit() {
      if (this.isEdit) {
        this.query = { ...this.query, ...this.queryCopy }
      }
      this.isEdit = !this.isEdit
    },
    // 请求数据案例
    initData() {
      // 请求接口数据，仅作为展示，需要配置src->config下环境文件
      // getUserInfo().then(res => {
      //   const data = res.data
      //   this.query = { ...this.query, ...data, cardtypeText: cardMap[data.cardtype] || '' }
      //   this.queryCopy = { ...this.query, ...data, cardtypeText: cardMap[data.cardtype] || '' }
      // })
    }
  }
}
</script>
<style lang="scss" scope>
.container {
  // margin: 10px 0;
}
.myForm {
  border-radius: 50px;
}
</style>
